<template>
  <view class="container">
    <swiper
      duration="200"
      previous-margin="140rpx"
      next-margin="140rpx"
      @change="currentHandle"
      :circular="true"
      :current="tabindex"
      class="swiper-out"
    >
      <swiper-item
        v-for="(item, index) in punchList"
        :key="index"
        class="swp-item active-item"
        :class="{ 'active-item': current === index }"
      >
        <view style="font-size: 40rpx">{{ index + 1 }}/{{ zonshu }}</view>
        <view
          class="slide-image"
          :style="{
            background:
              'url(' + item.bannerUrl + ') no-repeat center center;background-size: 100% 100%;',
          }"
          :id="index"
        >
          <!-- 单词数量 -->

          <view
            style="
              font-size: 60rpx;
              position: relative;
              top: -200rpx;
              border-bottom: 1rpx solid #f5f5f5;
            "
          >
            {{ item.dangci }}
            <text
              class="iconfont order-icon icon-fayin"
              style="padding-left: 20rpx; font-size: 40rpx"
              @tap="faying(item)"
            ></text>
          </view>
          <view
            style="
              font-size: 30rpx;
              color: #999;
              padding: 20rpx 0rpx;
              position: relative;
              top: -170rpx;
            "
          >{{ item.fayin }}</view>
          <!-- 写一个分割线 -->
          <view
            style="
              border-bottom: 1rpx solid #797878;
              padding: 20rpx 0rpx;
              position: relative;
              top: -170rpx;
            "
          ></view>
          <view style="font-size: 35rpx; color: #999; padding: 20rpx">{{ item.jieshi }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getWord } from '@/services/kaosi'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import noThing from '@/components/common/noThing.vue'
import SHA256 from '../../utils/util/sha256'
const nianji1 = ShouyeStore()
const punchList = ref<any>([
  {
    bannerUrl: 'https://qiniu-image.qtshe.com/1536067857379_122.png',
  },
  {
    bannerUrl: 'https://qiniu-image.qtshe.com/1536068379879_115.png',
  },
  {
    bannerUrl: 'https://qiniu-image.qtshe.com/1536068319939_230.png',
  },
  {
    bannerUrl: 'https://qiniu-image.qtshe.com/1536068074140_695.png',
  },
  {
    bannerUrl: 'https://qiniu-image.qtshe.com/1536068213758_796.png',
  },
])
const tabindex = ref(0)
const current = ref(0)
const zonshu = ref(0)
const currentHandle = (e) => {
  let { current } = e.detail
  current.value = current
}
onLoad(async (e: any) => {
  let res = await getWord({ nianji: nianji1.nianji })
  punchList.value = res.data
  console.log(punchList.value.length, 'ddddddddddddd')
  tabindex.value = e.index
  zonshu.value = punchList.value.length
  punchList.value.forEach((item) => {
    let fayin = item.jieshi.match(/\[([^\]]+)\]/)
    item.fayin = fayin[1]
    const startIndex = item.jieshi.indexOf(']') + 1
    item.jieshi = item.jieshi.substring(startIndex).trim()
  })
})
// 实现有道
const uuid = () => {
  console.log('调用了 uuid')
  function S4() {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
  }
  return S4() + S4() + S4()
}
const truncate = function (q) {
  console.log('调用了 truncate')
  const size = q.length
  if (size <= 20) {
    return q
  }
  return q.slice(0, 10) + size + q.slice(size - 10, size)
}
// 点击发音
const faying = (item) => {
  uni.showToast({
    title: '正在发音',
    icon: 'none',
    duration: 1000,
  })

  console.log('触发了没有')

  const url = 'https://openapi.youdao.com/api'
  // 需要修改此处
  const appKey = '252bb1640d14eb99'
  // 需要修改此处
  const appSecret = 'X9FGNDf9qs7NvCAvKJ8DH1YFTkbVe3h4'
  const salt = uuid()
  var curtime = Math.round(new Date().getTime() / 1000)
  // 签名
  const signStr = appKey + truncate(item.dangci) + salt + curtime + appSecret
  const sign = SHA256.sha256_digest(signStr)
  console.log(salt, 'salt')
  console.log(curtime, '时间')
  console.log(signStr, '11111111111')
  console.log(sign, 'sign')

  const result = []
  // 访问有道智云API，获取识别结果
  uni.request({
    url: url,
    method: 'POST',
    header: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: {
      q: item.dangci,
      from: 'auto',
      to: 'zh-CHS',
      appKey: appKey,
      salt: salt,
      sign: sign,
      signType: 'v3',
      curtime: curtime,
    },
    success: async function (res: any) {
      console.log(res, '我看看11111')
        let fayi = res.data['speakUrl']
      const innerAudioContext = uni.createInnerAudioContext()
      innerAudioContext.autoplay = true
      // val是需要发音的单词
      innerAudioContext.src = fayi
      innerAudioContext.onPlay(() => {
        console.log('开始播放')
        uni.hideLoading()
      })
      innerAudioContext.onError((res => {
        console.log(res.errMsg)
        console.log(res.errCode)
        uni.hideLoading()
      }))

    },
  })
}
</script>

<style scoped lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  // 底部划线分割
}

.slide-image {
  height: 1000rpx;
  width: 600rpx;
  margin-top: 40rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //加深

  border-radius: 10rpx;
}

.swiper-out {
  width: 1000rpx;
  height: 660rpx;
  margin-top: 60rpx;
}

.active-item .slide-image {
  box-shadow: 0 5rpx 20rpx 3rpx rgba(0, 0, 0, 0.15);
}

.swp-item {
  width: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rpx;
  opacity: 0.6;
}

.active-item {
  opacity: 1;
}

.swp-dot {
  display: flex;
  justify-content: center;
  flex: 1;
  margin-top: 18rpx;
}

.m-r-8 {
  margin-right: 8rpx;
}

.m-l-8 {
  margin-right: 8rpx;
}

.square-12 {
  width: 12rpx;
  height: 12rpx;
  background-color: #d8d8d8;
  border-radius: 6rpx;
  transition: width 0.2s linear;
}

.active {
  background-color: #3c3c3c;
  width: 36rpx;
  transition: width 0.2s linear;
}
</style>
